<template>
  <div>
    <h1>会员等级列表</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>Id</td>
          <td>等级名称</td>
          <td>累计消费金额</td>
          <td>权益名称</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list.a" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.LevelName }}</td>
          <td>{{ item.Moeny }}</td>
          <td>{{ item.Rights }}</td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
            <input type="button" value="删除" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import router from '@/router';
import { useStore } from '@/stores/user';
const a = useStore();

//声明一个变量存储一个后端返回的数据
let list: any = reactive({
  a: [],
});

// let list: any = ref([]);

//onMounted 叫生命周期函数  相当于文档就绪函数

onMounted(() => {
  if (a.userInfo.Id) {
    getList();
  } else {
    router.push('/loginView');
  }
});

//1.修改跳转并且传递参数
const update = (id: any) => {
  router.push({
    path: '/memberLevelUpdate',
    query: {
      id: id,
    },
  });
};

//获取会级等级显示列表
const getList = () => {
  axios({
    url: '/api/Members/GetMemberLevelList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      // list.value = res.data;
      list.a = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
